<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>分片断点续传</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="http://192.168.3.115/web/res/css/xadmin.css">
    <script src="http://192.168.3.115/web/res/lib/layui/layui.js" charset="utf-8"></script>
    <script src="http://192.168.3.115/web/res/js/xadmin.js"></script>
    <style>
      body{
        overflow: hidden;
      }
    </style>
</head>

<body>
  <script>

    // 上传配置
    var rOpt = {
      target: 'http://192.168.3.237:8081/indexupload/fileUpload',
      maxFiles: 3,  // 限制最多上传三个文件
    }

    // 块上传样式
    var blockStyle = {
      margin: '100px'
    }

    // 按钮上传样式
    var buttonStyle = {
      backgroundColor: 'red'
    }

    // 组件初始化（一般用于多页面网站，放在入口页面不带按钮弹出模式，子页面使用传递的参数自定义上传逻辑）
    function init(sliceUpload) {
      window.sliceUpload = sliceUpload;
    }

    // 点击完成（一般用于弹出模式，多文件上传）
    function confirm(args) {
      console.log('您上传了：', args.datas)
      if(args.data) {
        console.log('子页面传递了：', args.data)
      }
    }

    // 上传成功（一般用于块模式，单文件上传）
    function success(args) {
      console.log('上传成功：', args);
    }
  </script>


  <!-- 单文件上传 -->
  <slice-upload type="block" blockStyle="blockStyle" onSuccess="success"></slice-upload>


  <!-- 默认带按钮上传 -->
  <slice-upload onConfirm="confirm" buttonStyle="buttonStyle" buttonText="多文件上传" rOpt="rOpt"></slice-upload>


  <!-- 不带按钮的块上传 -->
  <slice-upload type="open" onInit="init" onConfirm="confirm"></slice-upload>

  <button class="layui-btn" onclick="xadmin.open('编辑','/edit.html',800,600)">打开子页面</button>

  <script src="./slice-upload.js" charset="utf-8"></script>
</body>

</html>
